<template>
  <div>
    <common-bg-blue1></common-bg-blue1>
    <div style="position: absolute; right: 10px; top: 5px; z-index: 1000">
      <common-back @clicked="handleClosePage"></common-back>
    </div>
    <div
      v-if="!pop.showBottomBtns"
      style="padding: 1px 0 1px 8px; position: absolute; left: 0; bottom: 10px; z-index: 1000"
      @click.stop="pop.showBottomBtns = true">
      <van-tag plain type="primary" size="medium">打开操作面板</van-tag>
    </div>
    <div style="display: flex; width: 100%; justify-content: center; align-items: center; padding: 5px 0">
      <img :src="headerImgUrl" width="80" height="80" style="border-radius: 50%" />
    </div>
    <div style="display: flex; width: 100%; justify-content: center; font-size: 14px">
      <div>
        {{ consumerObj.cname }}
        <i v-if="consumerObj.noble === 2" class="el-icon-star-on" style="color: red"></i>
      </div>
    </div>
    <div class="clerk_view_info">
      <div class="_view_info_item" style="background-color: #8a80ff; color: #fff">
        <span style="color: rgba(255, 255, 255, 0.6)">顾客编号</span>
        {{ consumerObj.ccode }}
      </div>
      <div
        v-if="consumerObj.checked === 0"
        class="_view_info_item"
        style="background-color: #ffffff; color: #3d8dff"
        @click="onCheck">
        未复核
      </div>
      <div v-else class="_view_info_item" style="background-color: #f5f5f5; color: #999999">已复核</div>
    </div>
    <!--性格-->
    <div style="display: flex; width: 100%; justify-content: center; margin-bottom: 8px">
      <div style="width: 12px; height: 12px; margin: 1px">
        <img v-if="consumerObj.sex === 0" src="@/assets/images/consumer-b.png" width="12" height="12" />
        <img v-else src="@/assets/images/consumer-g.png" width="12" height="12" />
      </div>
      <div style="font-size: 12px; color: #666666; text-align: center; padding-top: 2px">
        {{ getAge(consumerObj.solar) }}岁 {{ consumerObj.solar }}
        {{ consumerObj.lunar }}
        <span style="color: #766aff">{{ consumerObj.characters }}类性格</span>
      </div>
    </div>
    <!--性格-->
    <div style="position: relative; width: 100%; display: flex; justify-content: center; align-items: center">
      <div
        style="
          padding: 12px 16px;
          margin: 1px 16px 12px 16px;
          background-color: rgba(255, 255, 255, 0.8);
          flex: 1;
          color: #666666;
          font-size: 14px;
          border-radius: 12px;
        ">
        <div class="tag_personality">
          <img src="@/assets/images/jgsj-4.png" width="12" height="12" />
          <span style="margin: 0 12px 0 4px; font-size: 12px; color: #999999">性格标签</span>
          <span v-for="item in tagXg20">
            <van-tag v-if="item && item.startsWith('【')" type="success" plain style="padding: 1px 2px; margin: 0 2px">
              {{ item }}
            </van-tag>
            <van-tag v-else type="warning" plain style="padding: 1px 2px; margin: 0 2px">
              {{ item }}
            </van-tag>
          </span>
          <span v-for="item in tagXgOther">
            <van-tag v-if="item && item.startsWith('【')" type="success" plain style="padding: 1px 2px; margin: 0 2px">
              {{ item }}
            </van-tag>
            <van-tag v-else type="primary" plain style="padding: 1px 2px; margin: 0 2px">
              {{ item }}
            </van-tag>
          </span>
        </div>
      </div>
    </div>
    <!--标签-->
    <div style="position: relative; width: 100%; display: flex; justify-content: center; align-items: center">
      <div
        style="
          padding: 12px 16px;
          margin: 1px 16px 12px 16px;
          background-color: rgba(255, 255, 255, 0.8);
          flex: 1;
          color: #666666;
          font-size: 14px;
          border-radius: 12px;
        ">
        <div style="display: flex; align-items: center; margin-bottom: 10px">
          <img src="@/assets/images/consumer-t-1.png" width="12" height="12" />
          <span style="margin: 0 12px 0 4px; font-size: 12px; color: #999999">信任等级</span>
          <van-tag v-if="consumerObj.trust2 === 0" type="warning" style="padding: 1px 2px">未设置</van-tag>
          <van-tag v-if="consumerObj.trust2 === 1" type="danger" style="padding: 1px 2px">未破冰</van-tag>
          <van-tag v-if="consumerObj.trust2 === 2" type="primary" style="padding: 1px 2px">已破冰</van-tag>
          <van-tag v-if="consumerObj.trust2 === 3" type="success" style="padding: 1px 2px">已信任</van-tag>
        </div>
      </div>
    </div>
    <!--沙龙记录-->
    <div style="width: 100%; display: flex; justify-content: center; align-items: center">
      <div
        style="
          padding: 12px 16px;
          margin: 0 16px 12px 16px;
          background-color: rgba(255, 255, 255, 0.8);
          flex: 1;
          color: #666666;
          font-size: 14px;
          border-radius: 12px;
        ">
        <div style="display: flex; align-items: center; margin-bottom: 10px">
          <img src="@/assets/images/consumer-t-2.png" width="12" height="12" />
          <span style="margin: 0 12px 0 4px; font-size: 12px; color: #999999">沙龙记录</span>
        </div>
      </div>
    </div>
    <!--成交记录-->
    <div style="width: 100%; display: flex; justify-content: center; align-items: center">
      <div
        style="
          padding: 12px 16px;
          margin: 0 16px 12px 16px;
          background-color: rgba(255, 255, 255, 0.8);
          flex: 1;
          color: #666666;
          font-size: 14px;
          border-radius: 12px;
        ">
        <div style="display: flex; align-items: center; margin-bottom: 10px">
          <img src="@/assets/images/consumer-t-2.png" width="12" height="12" />
          <span style="margin: 0 12px 0 4px; font-size: 12px; color: #999999">成交总额 {{ dealTotalMoney }} 元</span>
          <div v-if="consumerObj.grade === 0" class="_view_grade" style="background-color: #eaeffe; color: #5f75bc">
            <img :src="imgUrl(consumerObj.grade)" width="18" height="18" style="margin-top: -3px" />
            <span>未定</span>
          </div>
          <div
            v-else-if="consumerObj.grade === 1"
            class="_view_grade"
            style="background-color: #fef7ea; color: #cc8408">
            <img :src="imgUrl(consumerObj.grade)" width="18" height="18" style="margin-top: -3px" />
            <span>C级</span>
          </div>
          <div
            v-else-if="consumerObj.grade === 2"
            class="_view_grade"
            style="background-color: #f1eafe; color: #8e5bdf">
            <img :src="imgUrl(consumerObj.grade)" width="18" height="18" style="margin-top: -3px" />
            <span>B级</span>
          </div>
          <div
            v-else-if="consumerObj.grade === 3"
            class="_view_grade"
            style="background-color: #feeaea; color: #ff5c60">
            <img :src="imgUrl(consumerObj.grade)" width="18" height="18" style="margin-top: -3px" />
            <span>A级</span>
          </div>
          <div
            v-else-if="consumerObj.grade === 4"
            class="_view_grade"
            style="background-color: #feeaea; color: #ff5c60">
            <img :src="imgUrl(consumerObj.grade)" width="18" height="18" style="margin-top: -3px" />
            <span>S级</span>
          </div>
        </div>
        <van-row v-for="item in lstdeal" style="margin-bottom: 6px">
          <van-col span="10" style="padding-top: 3px; text-align: left; font-size: 12px; color: #666666">
            {{ item.createTime.replace('T', ' ') }}
          </van-col>
          <van-col span="8" style="text-align: center; font-size: 14px; color: #666666">
            {{ item.item }}
          </van-col>
          <van-col span="6" style="text-align: right; font-size: 14px; color: #ff2121">{{ item.money }}元</van-col>
        </van-row>
      </div>
    </div>

    <!--编辑信息-->
    <van-popup
      v-model="pop.showClerkTags"
      position="top"
      :lock-scroll="false"
      :style="{ height: '100%', width: '100%', 'background-color': '#F5F5F5' }">
      <clerk-tags
        ref="refClerkTags"
        :key="keyForClerkTags"
        :mode="EditMode.m"
        @closed="handleCloseClerkInfo"></clerk-tags>
    </van-popup>

    <!-- 编辑属性 -->
    <van-popup
      v-model="pop.showModifyAttr"
      position="bottom"
      :lock-scroll="false"
      :style="{ height: '50%', width: '100%', 'background-color': '#F5F5F5' }">
      <div v-if="curModifyAttr.value === 'xqwj'">
        <div v-for="tag in tagXqwj" class="mdf_clerk_attr">
          <div class="tag_item">
            <van-checkbox v-model="tag.checked" shape="square">
              {{ tag.tag }}
            </van-checkbox>
          </div>
        </div>
      </div>
      <van-radio-group v-else v-model="consumerObj[curModifyAttr.value]" class="mdf_clerk_attr">
        <van-radio
          v-for="item in curModifyAttr.options"
          class="tag_item"
          :name="item.value"
          style="margin: 0px 0px 0px 0px">
          {{ item.name }}
        </van-radio>
      </van-radio-group>
      <div class="btn__bottom_group">
        <div class="btn__bottom" style="width: 48%" @click.stop="goUpdateClerk">保存</div>
        <div class="btn__bottom" style="width: 48%" @click.stop="() => (pop.showModifyAttr = false)">取消</div>
      </div>
    </van-popup>

    <!-- 编辑痕迹 -->
    <van-popup
      v-model="pop.showClerkHenji"
      position="top"
      :lock-scroll="false"
      :style="{ height: '100%', width: '100%', 'background-color': '#F5F5F5' }">
      <clerk-henji ref="refClerkHenji" @closed="() => (pop.showClerkHenji = false)"></clerk-henji>
    </van-popup>

    <!-- 底部按钮 -->
    <van-popup
      v-model="pop.showBottomBtns"
      position="bottom"
      :overlay="false"
      :style="{ height: '25vh', width: '100%' }"
      :lock-scroll="false">
      <div style="padding: 1px 0 1px 8px" @click.stop="pop.showBottomBtns = false">
        <van-tag plain type="primary" size="medium">隐藏</van-tag>
      </div>
      <div class="btn__bottom_group">
        <div class="btn__bottom" @click.stop="showModifyAttr(0)">信任状态</div>
        <div class="btn__bottom" @click.stop="showModifyAttr(1)">运营状态</div>
        <div v-if="consumerObj.noble === 2" class="btn__bottom" @click="applyNoble(0)">取消重点</div>
        <div v-else class="btn__bottom" @click="applyNoble(2)">标记重点</div>
      </div>
      <div class="btn__bottom_group">
        <div class="btn__bottom" @click.stop="showModifyAttr(3)">需求大小</div>
        <div class="btn__bottom" @click.stop="showModifyAttr(4)">升单品类</div>
        <div class="btn__bottom" @click.stop="showModifyAttr(2)">消费能力</div>
      </div>
      <div class="btn__bottom_group">
        <div class="btn__bottom" style="width: 48%" @click.stop="goEditClerkHenji">编辑痕迹</div>
        <div class="btn__bottom" style="width: 48%" @click.stop="goEditClerkInfo">编辑详情</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import * as actApi from '@/api/activity';
import { getPersonality } from '@/api/tags';
import * as ctgApi from '@/api/tags_clerk';
import { applyNobleById, editClerk, updateChecked, updateTrust } from '@/api/txs';
import { getRecordsByCid } from '@/api/ym';
// 引入自定义组件
import CommonBack from '@/components/back/index.vue';
import CommonBgBlue1 from '@/components/bg/Blue1.vue';
import WebConst from '@/utils/const/web-const';
import TagGategory from '@/utils/enum/tag-gategorys';
import ClerkHenji from './ClerkHenji.vue';
import ClerkTags from './ClerkTags.vue';
// 引入第三方组件
import dayjs from 'dayjs';
import {
  Notify,
  Checkbox as VanCheckbox,
  Col as VanCol,
  Popup as VanPopup,
  Radio as VanRadio,
  RadioGroup as VanRadioGroup,
  Row as VanRow,
  Tag as VanTag,
} from 'vant';
import 'vant/lib/checkbox/style';
import 'vant/lib/col/style';
import 'vant/lib/popup/style';
import 'vant/lib/radio-group/style';
import 'vant/lib/radio/style';
import 'vant/lib/row/style';
import 'vant/lib/tag/style';

const ModifyAttrList = [
  {
    title: '信任状态',
    value: 'trust2',
    options: [
      { name: '未破冰', value: 1 },
      { name: '已破冰', value: 2 },
      { name: '已信任', value: 3 },
    ],
  },
  {
    title: '运营状态',
    value: 'dengji',
    options: [
      { name: '正常', value: 0 },
      { name: '预警', value: 1 },
      { name: '失速', value: 2 },
      { name: '放弃', value: 3 },
    ],
  },
  {
    title: '消费能力',
    value: 'bg2',
    options: [
      { name: '超有钱', value: 0 },
      { name: '有钱', value: 1 },
      { name: '普通', value: 2 },
      { name: '没钱', value: 3 },
    ],
  },
  {
    title: '需求大小',
    value: 'demandLevel',
    options: [
      { name: '未设置', value: 0 },
      { name: '小', value: 1 },
      { name: '中', value: 2 },
      { name: '大', value: 3 },
    ],
  },
  {
    title: '升单品类',
    value: 'xqwj',
    options: [],
  },
];

const UserNothing = [4, 6, 10, 13, 19, 22, 28, 31, 36, 38];

export default {
  name: 'ClerkView',
  components: {
    VanRow,
    VanCol,
    VanPopup,
    VanTag,
    VanRadioGroup,
    VanRadio,
    VanCheckbox,
    ['common-back']: CommonBack,
    ['common-bg-blue1']: CommonBgBlue1,
    ['clerk-tags']: ClerkTags,
    ['clerk-henji']: ClerkHenji,
  },
  filters: {},
  data() {
    return {
      keyForClerkTags: 0,
      pop: {
        showBottomBtns: false,
        showClerkTags: false,
        showClerkHenji: false,
        showModifyAttr: false,
      },
      EditMode: { m: 0, EditTagOnly: 0, AddNewClerk: 1, EditClerk: 2 },
      headerImgUrl: '',
      consumerObj: {
        pic: '',
        cname: '',
        ccode: '',
        grade: 0,
        checked: 0,
        sex: 0,
        solar: '',
        lunar: '',
        trust: 0,
        id: 0,
      },
      lstCBg4: [],
      lstBg4: [],
      lstXQ: [],
      tagXqwj: [],
      otherTags: [],
      lstdeal: [],
      tagXg20: [],
      tagXgOther: [],
      dealTotalMoney: 0,
      curModifyAttr: ModifyAttrList[0],
      refreshParent: false,
      isUpdating: false,
    };
  },
  created() {
    // 加载标签定义(主要是加载 升单品类)
    this.loadTagDefinations();
  },
  methods: {
    imgUrl(grade) {
      const g = grade !== null ? grade : 0;
      return require('@/assets/images/keeper-c-' + g + '.png');
    },
    getAge(bd) {
      if (bd) {
        const birthday = dayjs(bd.replace('年', '-').replace('月', '-').replace('日', ''));
        const now = dayjs();
        return now.diff(birthday, 'year');
      }
      return 0;
    },
    handleClosePage(refresh) {
      this.$emit('closed', refresh || this.refreshParent);
    },
    handleCloseClerkInfo(refresh) {
      this.refreshParent === !!refresh;
      this.pop.showClerkTags = false;
    },
    loadPersonality: async function () {
      const errAlertMsg = '查询标签失败';
      this.tagXg20.splice(0, this.tagXg20.length);
      this.tagXgOther.splice(0, this.tagXgOther.length);
      await getPersonality(this.consumerObj.id)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              Notify({ type: 'danger', message: res.data.message });
            } else {
              Notify({ type: 'danger', message: errAlertMsg });
            }
            return;
          }
          const ret = res.data.data;
          if (ret && ret.length) {
            ret.every(x => {
              if (UserNothing.includes(x.id)) {
                if (x.tagDesc && x.tagDesc.length) {
                  x.tagDesc.forEach(y => {
                    if (!this.tagXg20.includes(y)) {
                      this.tagXg20.push(y);
                    }
                  });
                }
              } else {
                if (x.tagDesc && x.tagDesc.length) {
                  x.tagDesc.forEach(y => {
                    if (!this.tagXgOther.includes(y)) {
                      this.tagXgOther.push(y);
                    }
                  });
                }
              }
              return true;
            });
          }
        })
        .catch(err => {
          console.error(err);
          Notify({ type: 'danger', message: errAlertMsg });
        });
    },
    loadClerk: async function (item) {
      this.consumerObj = Object.assign({}, item);
      this.loadPersonality();
      const mPic = this.consumerObj.pic;
      if (mPic) {
        this.headerImgUrl = WebConst.clerkImageStaticUrl2Uri(mPic);
      }
      this.otherTags.splice(0, this.otherTags.length);
      if (this.consumerObj.other && this.consumerObj.other.length > 0) {
        const tmpOther = this.consumerObj.other.slice(0, this.consumerObj.other.length - 1).split(';');
        this.otherTags.push(...tmpOther);
      }
      this.lstCBg4.splice(0, this.lstCBg4.length);
      if (this.consumerObj.bg4) {
        const tmpBg4 = this.consumerObj.bg4.split(' ');
        this.lstCBg4.push(...tmpBg4);
      }
      this.lstXQ.splice(0, this.lstXQ.length);
      // 获取顾客的交易记录
      const errAlertMsg = '获取交易记录失败';
      this.lstdeal.splice(0, this.lstdeal.length);
      await getRecordsByCid(this.consumerObj.id)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              Notify({ type: 'danger', message: res.data.message });
            } else {
              Notify({ type: 'danger', message: errAlertMsg });
            }
            return;
          }
          const tmp = res.data.data;
          if (tmp && tmp.length > 0) {
            tmp
              .filter(d => d.status === 1 && d.money > 0)
              .forEach(x => {
                this.lstdeal.push(x);
                this.dealTotalMoney += x.money;
              });
          }
        })
        .catch(err => {
          console.error(err);
          Notify({ type: 'danger', message: errAlertMsg });
        });
      // 加载顾客的升单品类标签
      await this.loadClerkTagXqwj(this.consumerObj.id);
    },
    loadTagDefinations: async function () {
      const errAlertMsg = '查询标签失败';
      await actApi
        .getAllBaseTagsNoCount()
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              Notify({ type: 'danger', message: res.data.message });
            } else {
              Notify({ type: 'danger', message: errAlertMsg });
            }
            return;
          }
          for (const k in res.data.data.gategoryTags) {
            if (!res.data.data.gategoryTags.hasOwnProperty(k)) {
              continue;
            }
            const v = res.data.data.gategoryTags[k];
            if (!v || !v.length) {
              continue;
            }
            for (const tag of v) {
              tag.checked = undefined;
            }
            const key = Number.parseInt(k);
            switch (key) {
              case TagGategory.TAG_101_200_XU_QIU.id:
                this.tagXqwj.push(...v);
                break;
            }
          }
        })
        .catch(err => {
          console.log('loadAllTagDefinations', err);
          Notify({ type: 'danger', message: errAlertMsg });
        });
    },
    onCheck() {
      this.consumerObj.checked = 1;
      const index = this.list.findIndex(v => v.id === this.consumerObj.id);
      const c = this.list[index];
      if (c) {
        c.checked = 1;
      }
      updateChecked(this.consumerObj.id);
    },
    applyNoble: async function (val) {
      if (val !== 0 && val !== 2) {
        return;
      }
      const errAlertMsg = '提交失败';
      await applyNobleById(this.consumerObj.id, val)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              Notify({ type: 'danger', message: res.data.message });
            } else {
              Notify({ type: 'danger', message: errAlertMsg });
            }
            return;
          }
          this.consumerObj.noble = val;
          Notify({ type: 'success', message: '提交成功' });
        })
        .catch(err => {
          console.error(err);
          Notify({ type: 'danger', message: errAlertMsg });
        });
    },
    applyTrust(id, t1, t2) {
      const dataInfo = new FormData();
      dataInfo.append('trust', t1);
      dataInfo.append('trust2', t2);
      const errAlertMsg = '提交失败';
      updateTrust(id, dataInfo)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              Notify({ type: 'danger', message: res.data.message });
            } else {
              Notify({ type: 'danger', message: errAlertMsg });
            }
            return;
          }
          this.consumerObj.trust2 = t2;
          Notify({ type: 'success', message: '提交成功' });
        })
        .catch(err => {
          console.error(err);
          Notify({ type: 'danger', message: errAlertMsg });
        });
    },
    showModifyAttr: async function (val) {
      this.curModifyAttr = ModifyAttrList[val];
      this.pop.showModifyAttr = true;
    },
    goEditClerkHenji: async function () {
      this.pop.showClerkHenji = true;
      await this.$nextTick();
      this.$refs.refClerkHenji.getConsumerFangan(this.consumerObj.id);
    },
    goEditClerkInfo: async function () {
      this.EditMode.m = this.EditMode.EditClerk;
      this.pop.showClerkTags = true;
      this.keyForClerkTags++;
      await this.$nextTick();
      this.$refs.refClerkTags.addOrEditClerk(this.consumerObj);
    },
    loadClerkTagXqwj: async function (cid) {
      this.tagXqwj.forEach(x => (x.checked = false));
      const errAlertMsg = '查询顾客升单品类出错';
      await ctgApi
        .getOneGatetory(cid, TagGategory.TAG_101_200_XU_QIU.id)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              Notify({ type: 'danger', message: res.data.message });
            } else {
              Notify({ type: 'danger', message: errAlertMsg });
            }
            return;
          }
          const ret = res.data.data;
          if (ret && ret.length > 0) {
            ret.forEach(x => {
              const tmp = this.tagXqwj.find(y => y.name === x.tagName);
              if (tmp) {
                tmp.checked = true;
              }
            });
          }
        })
        .catch(err => {
          console.log('loadClerkTagXqwj', err);
          Notify({ type: 'danger', message: errAlertMsg });
        });
    },
    updateClerkTagXqwj: async function (cid) {
      let tagNames = null;
      const xqwjTags = this.tagXqwj.filter(x => x.checked).map(x => x.name);
      if (xqwjTags && xqwjTags.length > 0) {
        tagNames = xqwjTags.join(',');
      }
      const errAlertMsg = '更新顾客升单品类出错';
      await ctgApi
        .updateOneGatetory(cid, TagGategory.TAG_101_200_XU_QIU.id, tagNames)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              Notify({ type: 'danger', message: res.data.message });
            } else {
              Notify({ type: 'danger', message: errAlertMsg });
            }
            return;
          }
          this.pop.showModifyAttr = false;
        })
        .catch(err => {
          console.log('updateClerkTagXqwj', err);
          Notify({ type: 'danger', message: errAlertMsg });
        });
    },
    goUpdateClerk: async function () {
      if (this.isUpdating) {
        return;
      }
      this.isUpdating = true;
      if (this.curModifyAttr.value === 'xqwj') {
        await this.updateClerkTagXqwj(this.consumerObj.id);
        this.isUpdating = false;
        return;
      }
      const errAlertMsg = '更新' + this.curModifyAttr.title + '失败';
      await editClerk(this.consumerObj)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              Notify({ type: 'danger', message: res.data.message });
            } else {
              Notify({ type: 'danger', message: errAlertMsg });
            }
            return;
          }
          this.pop.showModifyAttr = false;
        })
        .catch(err => {
          console.log('editClerk', err);
          Notify({ type: 'danger', message: errAlertMsg });
        })
        .finally(() => {
          this.isUpdating = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.clerk_view_info {
  width: 100%;
  margin-bottom: 8px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2px;

  ._view_info_item {
    background-color: #8a80ff;
    border-radius: 4px;
    font-size: 0.32rem;
    color: #fff;
    padding: 3px 8px 1px 8px;
    display: flex;
    align-items: center;
  }
}

._view_grade {
  background-color: #8a80ff;
  border-radius: 4px;
  color: #fff;
  padding: 3px 8px 1px 8px;
  display: flex;
  align-items: center;
}

.mdf_clerk_attr {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.16667rem;

  .tag_item {
    height: 40px;
    margin: 0 0 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0px;
  }
}

.btn__bottom_group {
  width: 100%;
  margin: 10px 0 0 0;
  padding: 5px 16px 12px 16px;
  display: flex;
  justify-content: space-between;
}
.btn__bottom {
  width: 200px;
  height: 80px;
  font-size: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #fafafa;
  border-radius: 8px;
  color: #766aff;
  border: 1px solid #766aff;
}
.tag_personality {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}
</style>
